<template>
  <div class="container">
    <span style="cursor: pointer;">
      <slot>
        <!--        <el-button size="small" plain>签字</el-button>-->
        <div class="img-container">
          <div class="img-div" @click="sign()">
            <div v-if="(!img)||img==='null'" class="un-sign">
              点击此处进行签名
            </div>
            <img v-else class="un-sign" :src="img|getSrc">
          </div>
          <div v-if="!simple" style="margin-top: 4px;color: #606266;">
            {{ time }}
          </div>
          <div v-if="!simple" class="button-container">
            <el-button type="primary" size="mini" @click="open()">查看</el-button>
            <el-button type="danger" size="mini" @click="deleteSign()">撤销</el-button>
          </div>
          <div v-else class="button-container">
            <el-button type="primary" size="mini" @click="open()">修改</el-button>
          </div>
        </div>
      </slot>
    </span>
    <el-dialog ref="dialog" top="5vh" style="-webkit-user-select: none;" append-to-body :visible.sync="showDialog"
               title="签字区" width="80%" :before-close="close">
      <img v-if="signImg&&imgFlag" :src="`${BASE_URL}${signImg}`" class="img-filter">
      <VueSignaturePad
        id="signature"
        ref="signaturePad"
        width="100%"
        height="400px"
        :options="options"
      />
      <span slot="footer" class="dialog-footer">
        <el-row v-if="time!==' '" type="flex" justify="end">
          <el-col :span="12"
                  style="text-align: center;margin-bottom: 8px;font-weight: bold;color: #303133;font-size: 18px;">
            签字时间:{{ time }}
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12" style="text-align:left;">
            <el-button @click="close()">取 消</el-button>
          </el-col>
          <el-col :span="4" style="text-align:right;">
            <el-button type="warning" @click="clear()">清空写字版</el-button>
          </el-col>
          <el-col v-if="!simple" :span="4" style="text-align:right;">
            <el-button type="danger" @click="deleteSign()">撤销签名</el-button>
          </el-col>
          <el-col :span="4" style="text-align:right;">
            <el-button type="primary" @click="saveIMG()">提 交</el-button>
          </el-col>
        </el-row>
      </span></el-dialog>
  </div>
</template>
<script>

import {BASE_URL} from '@/utils/request'

export default {
  name: 'Sign',
  filters: {
    getSrc(img) {
      if (img.slice(0, 4) === 'data') {
        return img
      } else {
        return `${BASE_URL}${img}`
      }
    }
  },
  props: {
    simple: {
      type: Boolean,
      default: false
    },
    img: {
      type: null,
      default: null
    },
    item: {
      type: Number,
      default: -1
    },
    time: {
      type: String,
      default: '/'
    }
  },
  data() {
    return {
      BASE_URL: BASE_URL,
      imgFlag: true,
      signImg: this.$store.getters.userInfo.sign_img,
      showDialog: false,
      options: {
        penColor: '#000000',
        minWidth: 1,
        maxWidth: 4
      },
      te: null
    }
  },
  watch: {
    showDialog: {
      handler(newval, oldval) {
        console.log(newval)
        if (newval) {
          this.$nextTick(() => {
            this.test()
          })
        }
      }
    }
  },
  created() {
    if (this.signImg === null) {
      this.imgFlag = false
    }
  },
  methods: {
    test() {
      const canvas = document.getElementById('signature').firstChild
      canvas.addEventListener('touchmove', function (event) {
        event.preventDefault()
      }, false)
    },
    sign() {
      this.$emit('submit', 1)
    },
    open() {
      this.imgFlag = this.signImg !== null
      this.showDialog = !this.showDialog
    },
    close() {
      this.$refs.signaturePad.clearSignature()
      this.showDialog = false
    },
    clear() {
      this.imgFlag = false
      this.$refs.signaturePad.clearSignature()
    },
    dataURLtoFile(dataURL, fileName, fileType) {
      const arr = dataURL.split(',')
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], fileName, {type: fileType || 'image/jpg'})
    },
    deleteSign() {
      this.$emit('delete', this.item)
    },
    saveIMG() {
      if (this.imgFlag) {
        this.$emit('submit', 1)
        this.close()
      } else {
        const {isEmpty, data} = this.$refs.signaturePad.saveSignature()
        if (isEmpty) {
          this.$message.error('签名不能为空')
        } else {
          this.$emit('submit', this.dataURLtoFile(data, 'sign.jpg'), data)
          this.te = data
          this.$emit('change', this.te)
          this.close()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.img-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .button-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding: 0px 1px;

    > button {
      font-size: 8px;
      margin: 0;
    }
  }
}

#signature {
  border: solid 2px #454545;
  border-radius: 4px;
  -webkit-user-select: none;

  canvas {
    -webkit-user-select: none;
  }
}

.un-sign {
  height: 64px;
  border-radius: 4px;
  text-align: center;
  line-height: 64px;
  border: 1px #DCDFE6 dashed;
  width: 128px;
  color: #C0C4CC;
  font-size: 10px;
}

.img-filter {
  box-sizing: border-box;
  width: calc(100% - 40px);
  height: 400px;
  position: absolute;
  z-index: 100;
}

.container {
  width: 128px;
}
</style>
